<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> jsx 语法 </title>
</head>
<body>
    
</body>
</html>
<script>
   //21-04-10 补习+ 摘自王红元 
   //比如现在又一个电影列表 如何通过react展示 (通过一个组件)
   //demo1  
   class App extends React.component {
       constructor(props){
           super(props);
           this.state = {
               movies:["大话西游","喜羊羊","饭冰冰","黑子","老王"]
           }
       }
       render(){
           return(
               <div>
                <h2> 电影列表 </h2>
                <ul>
                    {this.state.movies.map((item,index)=>{
                        return (<li>{item}</li>)
                    })}
                    </ul>
               </div>
           )
       }
   } 
   ReactDOM.render(<App/>,document.getElementById("app"));

   //demo2 
   //计数器案例 交互
   class App extends React.Component{
       constructor(props){
           super(props);
           this.state = {
               count:0
           }
       }
       render(){
           return(
               <div>
                <h2>当前计数:{this.state.count}</h2>
                <button onClick = {this.inc.bind(this)}> +1</button>
                <button onClick = {this.dec.bind(this)}> -1</button>
                </div>
           )
       }
       inc(){
           this.setState({count: this.state.count+1})
       }
       dec(){
           this.setState({count: this.state.count-11})
       }
   }
   ReactDOM.render(<App/>,document.getElementById("app1"));

   //下面时jsx 语法？
   /*
    jsx是什么？ 
        *js的语法拓展 在很多地方称为jsxml 用来描述我们的界面 完全可以和我们的js 融合到一块去 
        *不同于 vue中的模板语法 不需要去蜘蛛指令 v-XXXXXXX
        *jsx 是嵌入到js中的一种结构语法 
        *jsx 的顶层只能由一个根元素Root 所以我们很多时候在外层包裹一个div 或者 Fragment 
        *方便阅读 在jsx外层包裹 一个小括号 并且可以换行书写 
        *jsx 的标签可以双标签 也可以单标签 单标签必须闭口 /> 
        */


   //jsx 嵌入表达式？
   /*
    如果我们jsx中的内容是动态的 我们可以通过表达式来获取 
    书写规范 {表达式}
    大括号内可以式变量 字符串 数组 函数 调用等任意js 表达式 
    */   

    // {/* 注释规范 */}


    //jsx 嵌入变量 
    /*
      情况一 当变量是number string array类型时 可以直接显示 
      情况二 当变量是null undefined boolean类型时 内容为空 
        注意 如果希望可以显示的话 那么需要转换为字符串  转换的方式由很多 toString() 和空字符串拼接 String变量等...
      情况三 对象类型不能作为子元素 

      ？为什么null undefined boolean在jsx中显示为空讷  
         在开发过程中 会就行很多判断 在判断结果为false时 不显示一个内容 在判断结果为true时 显示一个内容 
         看下面代码示例 
    */ 
    class App extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                flag :false
            }
        }
        render(){
            return(
                <div>
                    {this.state.flag? <h2>我是h2</h2> : null}

                    {this.state.flag && <h2>我是h2</h2>
                    }    
                </div>
            )
        }
    }
   
















</script>